import { defineStore } from 'pinia'
import { settingsApi } from '../api/settings'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    settings: {
      interface: {
        theme: {
          mode: 'light',
          primaryColor: '#1a5cff',
          compact: false,
          animations: true
        },
        timezone: 'Asia/Shanghai'
      },
      notifications: {
        deployStart: true,
        deployComplete: true,
        deployFailed: true,
        channels: {
          browser: false,
          email: false
        }
      }
    },
    loading: false,
    initialized: false
  }),

  actions: {
    loadLocalSettings() {
      try {
        const savedSettings = localStorage.getItem('settings');
        if (savedSettings) {
          const parsedSettings = JSON.parse(savedSettings);
          this.settings = {
            ...this.settings,
            ...parsedSettings
          };
          if (this.settings?.interface?.theme) {
            this.applyThemeSettings(this.settings.interface.theme);
          }
        }
      } catch (error) {
        console.error('Failed to load local settings:', error);
      }
    },

    saveLocalSettings() {
      try {
        localStorage.setItem('settings', JSON.stringify(this.settings));
      } catch (error) {
        console.error('Failed to save local settings:', error);
      }
    },

    async initialize() {
      if (this.initialized) return;
      
      try {
        this.loadLocalSettings();
        await this.fetchSettings();
        this.initialized = true;
      } catch (error) {
        console.error('Failed to initialize settings:', error);
        throw error;
      }
    },

    async fetchSettings() {
      try {
        this.loading = true;
        const response = await settingsApi.getSettings();
        
        this.settings = {
          ...this.settings,
          ...response
        };
        
        if (this.settings?.interface?.theme) {
          this.applyThemeSettings(this.settings.interface.theme);
          this.saveLocalSettings();
        }
      } catch (error) {
        console.error('Failed to fetch settings:', error);
        throw error;
      } finally {
        this.loading = false;
      }
    },

    async updateSettings(section, data) {
      try {
        const response = await settingsApi.updateSettings(section, data);
        this.settings = {
          ...this.settings,
          ...response
        };
        this.saveLocalSettings();
        return response;
      } catch (error) {
        console.error('Failed to update settings:', error);
        throw error;
      }
    },

    applyThemeSettings(theme) {
      document.documentElement.setAttribute('data-theme', theme.mode);
      document.documentElement.style.setProperty('--primary-color', theme.primaryColor);
      document.documentElement.style.setProperty('--spacing-base', theme.compact ? '0.75rem' : '1rem');
      document.documentElement.style.setProperty('--transition-fast', theme.animations ? '0.2s ease' : 'none');
    }
  }
}) 